let vm = new Vue({
    el: "#app",
    data: {
        userList:[
            {
                id: 10010,
                username: "李文豪",
                sex: "1",
                birthday: '2022-07-15',
                tel: "13812345678",
                profession: "1",
                sal: 3000.15,
                address: "湖北武汉",
                remark: "我是帅哥"
            },
            {
                id: 10012,
                username: "魏聪聪",
                sex: "1",
                birthday: '2022-05-05',
                tel: "18812345678",
                profession: "2",
                sal: 4000.14,
                address: "湖北襄阳",
                remark: "我是大帅哥"
            },
            {
                id: 10013,
                username: "陈志军",
                sex: "0",
                birthday: '2022-03-25',
                tel: "15812345678",
                profession: "3",
                sal: 30500,
                address: "湖南长沙",
                remark: "hi ok"
            },
            {
                id: 10014,
                username: "郭云飞",
                sex: "0",
                birthday: '2022-02-12',
                tel: "13899945888",
                profession: "1",
                sal: 13000.25,
                address: "河北石家庄",
                remark: "大"
            },
            {
                id: 10018,
                username: "汪坔",
                sex: "1",
                birthday: '2022-07-08',
                tel: "13812345530",
                profession: "2",
                sal: 3000.25,
                address: "广州",
                remark: "很大"
            },
            {
                id: 10019,
                username: "熊周哲",
                sex: "1",
                birthday: '2022-08-05',
                tel: "13812345420",
                profession: "2",
                sal: 5999.45,
                address: "湖北武汉",
                remark: "哈哈"
            },
            {
                id: 10033,
                username: "王思维",
                sex: "1",
                birthday: '2022-12-12',
                tel: "13812345666",
                profession: "3",
                sal: 5000.25,
                address: "北京朝阳区",
                remark: "哎呀"
            },
            {
                id: 10040,
                username: "王一炜",
                sex: "0",
                birthday: '2022-09-15',
                tel: "13812345999",
                profession: "1",
                sal: 8000.15,
                address: "成都",
                remark: "你好"
            },
            {
                id: 10045,
                username: "老丁",
                sex: "0",
                birthday: '2022-10-16',
                tel: "13812345320",
                profession: "2",
                sal: 23000,
                address: "天津",
                remark: "哦哦"
            },
            {
                id: 10050,
                username: "赵鹏",
                sex: "0",
                birthday: '2022-02-03',
                tel: "13812345111",
                profession: "1",
                sal: 3500.5,
                address: "黑龙江哈尔滨",
                remark: "是呀"
            },
            {
                id: 10052,
                username: "郭建华",
                sex: "1",
                birthday: '2022-04-12',
                tel: "13812345689",
                profession: "1",
                sal: 3999.5,
                address: "内蒙古赤峰",
                remark: "vue好简单"
            },
            {
                id: 10060,
                username: "陈云飞",
                sex: "1",
                birthday: '2022-07-11',
                tel: "18888888888",
                profession: "3",
                sal: 1500,
                address: "湖北黄冈",
                remark: "哎，挣钱好难"
            }
        ],
        // 查询的三种方式
        selectType:"1",
        flag:false,
        addUserList:{
            id: undefined,
            username: undefined,
            sex: "1",
            birthday: undefined,
            tel: undefined,
            profession: "1",
            sal: undefined,
            address: undefined,
            remark: undefined
        },
        // 表单校验
        // 校验规则
        ruleReg : {
            username: [
                {required: true, message: "用户名不能为空", trigger:"blur"},
                {min:2,max:10,message:"长度在6-10个字符",trigger:"blur"}
            ],

            tel:[
                {required: true,message:"电话不能为空",trigger:"blur"},
                {min:11,max:11,message: "电话为11位",trigger: "blur"}
            ],
            sal:[
                {required:true,message:"工资不能为空",trigger:"blur"},
            ],
            address:[
                {min:2,max:20,message:"请填写2-20位的地址"}
            ]
        },
        // 编辑表格
        editUserList:{
            id: undefined,
            username: undefined,
            sex: undefined,
            birthday: undefined,
            tel: undefined,
            profession: undefined,
            sal: undefined,
            address: undefined,
            remark: undefined
        },
        // 编辑表格开关
        flag1:false,

        // 批量删除数组
        ids:[],

        // 查询关键字
        selectData:undefined,

        // 创建分页相关数据
        total:49,
        pageNum:2,
        pageSize:5,
        pageSizes:[2,3,5,10,20],
    },
    methods: {
        // 性别格式化处理
        sexFormatter:function (rowsData) {
            return rowsData.sex == 1 ? "男":"女";
        },
        professionFormatter:function (rowsData) {
            switch (rowsData.profession){
                case "1":
                    return "程序猿";
                case "2":
                    return "攻城狮";
                case "3":
                    return "码农";
            }
        },
        // selection全选获取元素方法
        selectAll:function (params) {
            this.ids = params.map(item=>{
                return item.id;
            })
        },
        selectOne:function (param) {
            this.ids = param.map(item=>{
                return item.id;
            })
        },
        // 格式化刷新方法
        resetData:function () {
            this.$refs["formData"].resetFields();
        },

        // 编辑表单格式化
        resetData1:function () {
            this.$refs["formData1"].resetFields();
        },

        // 添加元素到表单中
        submitUser:function () {
            this.$refs["formData"].validate(flag=>{
                if(flag){ // 校验通过

                    // 处理日期格式
                    let fullYear = this.addUserList.birthday.getFullYear();
                    let month = this.addUserList.birthday.getMonth();
                    let date = this.addUserList.birthday.getDate();
                    month++;
                    if(month<10){
                        month="0"+month;
                    }
                    if(date<10){
                        date="0"+date;
                    }
                    // 封装对象
                        let newUser ={
                            id:this.userList[this.userList.length - 1].id+1,
                            username : this.addUserList.username,
                            sex : this.addUserList.sex,
                            birthday : fullYear+"-"+month+"-"+date,
                            tel : this.addUserList.tel,
                            profession : this.addUserList.profession,
                            sal : this.addUserList.sal,
                            address : this.addUserList.address,
                            remark : this.addUserList.remark,
                        }
                    // 添加新对象
                    this.userList.push(newUser);

                    // 关闭窗口
                    this.flag=false;
                    // 通知提醒
                    this.$message({
                        title:"温馨提示",
                        type:"success",
                        message:"添加成功",
                        showClose: true
                    })


                }else{ // 校验不通过
                    this.$alert("请检查表单格式是否正确")
                }
            })
        },

        // 编辑元素(数据回显)
        editUser:function (rowsData) {
            this.editUserList.id=rowsData.id;
            this.editUserList.username=rowsData.username;
            this.editUserList.sex=rowsData.sex;
            this.editUserList.birthday=rowsData.birthday;
            this.editUserList.tel=rowsData.tel;
            this.editUserList.profession=rowsData.profession;
            this.editUserList.sal=rowsData.sal;
            this.editUserList.address=rowsData.address;
            this.editUserList.remark=rowsData.remark;
            this.flag1 = true;
        },
        // 提交修改编辑表单里的元素
        submitEdit:function () {
            for (let i = 0; i < this.userList.length; i++) {
                let element = this.userList[i];
                if(this.editUserList.id == element.id){
                    this.$confirm("你确定要修改吗？")
                        .then(()=>{
                            element.username=this.editUserList.username;
                            element.sex=this.editUserList.sex;
                            element.birthday=this.editUserList.birthday;
                            element.tel=this.editUserList.tel;
                            element.profession=this.editUserList.profession;
                            element.sal=this.editUserList.sal;
                            element.address=this.editUserList.address;
                            element.remark=this.editUserList.remark;

                            // 提示修改成功
                            this.$message({
                                title: "温馨提示",
                                message:"修改成功",
                                type:"success",
                                showClose: true,
                            })

                            // 关闭原窗口
                            this.flag1=false;
                        })
                        .catch(()=>{

                        })
                }
            }
        },

        // 删除
        deleteUser:function (rowsData) {
            // 询问确认删除
            this.$confirm("您确的要删除吗？")
                .then(()=>{
                    for (let i = 0; i < this.userList.length; i++) {
                        let element = this.userList[i];
                        if(element.id == rowsData.id){
                            this.userList.splice(i,1);
                            // 提示删除成功
                            this.$message({
                                title: "温馨提示",
                                message:"删除成功",
                                type:"success",
                                showClose: true,
                            })
                        }
                    }
                })
                .catch(()=>{

                })
        },

        // 批量删除
        multiplyDelete:function () {
            //判断
            this.$confirm("您确定要删除吗？")
                .then(()=>{
                    // 重置(使用过滤器)
                    this.userList = this.userList.filter(item=>{
                        // userList的id是整数类型收集到ids里也是小数类型Index是字符串方法所以都转换成字符串
                         return String(this.ids).indexOf(String(item.id)) == -1;
                    })

                    // 提示删除成功
                    this.$message({
                        title:"温馨提示",
                        message:"删除成功",
                        type:"success",
                        showClose:true
                    })
                })
                .catch(()=>{

                })
        },

        // 查询方法
        selectUser:function () {

            // 还原数组
            this.userList=[
                {
                    id: 10010,
                    username: "李文豪",
                    sex: "1",
                    birthday: '2022-07-15',
                    tel: "13812345678",
                    profession: "1",
                    sal: 3000.15,
                    address: "湖北武汉",
                    remark: "我是帅哥"
                },
                {
                    id: 10012,
                    username: "魏聪聪",
                    sex: "1",
                    birthday: '2022-05-05',
                    tel: "18812345678",
                    profession: "2",
                    sal: 4000.14,
                    address: "湖北襄阳",
                    remark: "我是大帅哥"
                },
                {
                    id: 10013,
                    username: "陈志军",
                    sex: "0",
                    birthday: '2022-03-25',
                    tel: "15812345678",
                    profession: "3",
                    sal: 30500,
                    address: "湖南长沙",
                    remark: "hi ok"
                },
                {
                    id: 10014,
                    username: "郭云飞",
                    sex: "0",
                    birthday: '2022-02-12',
                    tel: "13899945888",
                    profession: "1",
                    sal: 13000.25,
                    address: "河北石家庄",
                    remark: "大"
                },
                {
                    id: 10018,
                    username: "汪坔",
                    sex: "1",
                    birthday: '2022-07-08',
                    tel: "13812345530",
                    profession: "2",
                    sal: 3000.25,
                    address: "广州",
                    remark: "很大"
                },
                {
                    id: 10019,
                    username: "熊周哲",
                    sex: "1",
                    birthday: '2022-08-05',
                    tel: "13812345420",
                    profession: "2",
                    sal: 5999.45,
                    address: "湖北武汉",
                    remark: "哈哈"
                },
                {
                    id: 10033,
                    username: "王思维",
                    sex: "1",
                    birthday: '2022-12-12',
                    tel: "13812345666",
                    profession: "3",
                    sal: 5000.25,
                    address: "北京朝阳区",
                    remark: "哎呀"
                },
                {
                    id: 10040,
                    username: "王一炜",
                    sex: "0",
                    birthday: '2022-09-15',
                    tel: "13812345999",
                    profession: "1",
                    sal: 8000.15,
                    address: "成都",
                    remark: "你好"
                },
                {
                    id: 10045,
                    username: "老丁",
                    sex: "0",
                    birthday: '2022-10-16',
                    tel: "13812345320",
                    profession: "2",
                    sal: 23000,
                    address: "天津",
                    remark: "哦哦"
                },
                {
                    id: 10050,
                    username: "赵鹏",
                    sex: "0",
                    birthday: '2022-02-03',
                    tel: "13812345111",
                    profession: "1",
                    sal: 3500.5,
                    address: "黑龙江哈尔滨",
                    remark: "是呀"
                },
                {
                    id: 10052,
                    username: "郭建华",
                    sex: "1",
                    birthday: '2022-04-12',
                    tel: "13812345689",
                    profession: "1",
                    sal: 3999.5,
                    address: "内蒙古赤峰",
                    remark: "vue好简单"
                },
                {
                    id: 10060,
                    username: "陈云飞",
                    sex: "1",
                    birthday: '2022-07-11',
                    tel: "18888888888",
                    profession: "3",
                    sal: 1500,
                    address: "湖北黄冈",
                    remark: "哎，挣钱好难"
                }
            ];

            // 三种查询方法 switch判断
            switch (this.selectType) {
                case "1":
                    this.userList = this.userList.filter(item=>{
                        return String(item.id).indexOf(this.selectData) != -1;
                    });
                    break;
                case "2":
                    this.userList = this.userList.filter(item=>{
                        return item.username.indexOf(this.selectData) != -1;
                    });
                    break;
                case "3":
                    this.userList = this.userList.filter(item=>{
                        return item.address.indexOf(this.selectData) !=-1;
                    });
                    break;
            }
        },


        // 分页查询方法
        mth1:function (param) {
            this.$alert(`当前页面为${param} , 当前页面显示${this.pageSize}`)
        },

        mth2:function (param) {
            this.$alert(`当前页面为${this.pageNum} , 当前页面显示${param}`)
        }
    },
});